<template>
  <!-- 法规平台 -->
  <div class="app-container">
    <!-- <h1>法规平台</h1> -->
    <div class="boxlaw">
      <div slot="header" class="clearfix">
        <ComSelect @EventChange="ChangeFn" :options="options"></ComSelect>
      </div>

      <div class="comform">
        <ComForm
          ref="comForm"
          @EventReset="resetFn"
          @EventOnsubmit="queryFn"
          :list="comForm"
        >
        </ComForm>
      </div>

      <ComTable
        @handleCurrentChange="CurrentPageChangeFn"
        @handleSizeChange="currentPageSizeChangeFn"
        :key="random"
        :list="tableList"
        :modes="tableModes"
        :config="{ border: true, loading }"
        :pagination="{ total: paging.total, pageNum: paging.pageNum }"
      >
      </ComTable>
    </div>
  </div>
</template>

<script>
import ComForm from "../../../components/comForm.vue";
import ComSelect from "../../../components/comSelect.vue";
import ComTable from "../../../components/comTable.vue";
import comForm from "../../../components/comForm.vue";
import { getCouponUserListApi } from "@/wss/api/systemManagement/Cvm/coupon.js";
// import { getdocGetTypeApi } from "@/wss/api/ContentSupervision.js";

import { getCouponListApi } from "@/wss/api/systemManagement/Cvm/settting.js";
export default {
  name: "laws",
  dicts: ["sys_normal_disable"],
  components: { ComSelect, ComForm, comForm, ComTable },

  data() {
    return {
      initSelectValue: "",
      // 加载
      loading: false,
      paging: {
        pageNum: 1,
        pageSize: 10,
        status: "",
        total: 10,
        orderNo: "",
        phonenumber: "",
        nickname: "",
      },
      // 切换筛选状态，不更新bug修复
      random: "",
      // 当前筛选的状态
      currentSelect: "",
      options: {
        value: "",
        title: "快速筛选",
        list: [
          {
            value: "",
            label: "全部",
          },
          {
            value: "0",
            label: "可用",
          },
          {
            value: "1",
            label: "已使用",
          },
          {
            value: "2",
            label: "已过期",
          },
        ],
      },
      // 动态生成下拉列表的筛选条件
      dynamicFilter: {},
      // 表格的数据
      tableList: [],
      tableModes: [
        {
          showOverflowTooltip: true,
          width: 200,
          label: "用户昵称",
          mode: "nickname",
          showOverflowTooltip: true,
        },
        {
          label: "手机号",
          mode: "phonenumber",
        },
        {
          label: "卡券状态",
          mode: "status",
          effectiveStatus: true,
          width: 100,
          align: "center",
          isShowTag: true,
          options: [
            {
              l: "可用",
              v: 0,
            },
            {
              l: "已使用",
              v: 1,
              type: "warning",
            },
            {
              l: "已过期",
              v: 2,
              type: "danger",
            },
            {
              l: "尚未生效",
              v: 3,
            },
          ],
        },
        {
          label: "领取时间",
          mode: "getTime",
          showOverflowTooltip: true,
        },

        {
          label: "有效期至",
          mode: "expireTime",
        },
      ],
      comForm: {
        modes: [
          {
            placeholder: "请输入用户名称",
            formType: "input",
            mode: "nickname",
            label: "用户昵称",
            value: "",
          },
          {
            placeholder: "请输入用户手机号",
            formType: "input",
            mode: "phonenumber",
            label: "手机号",
            value: "",
          },
          {
            formType: "date",
            mode: "getTime",
            label: "领取时间",
            value: null,
          },
        ],
      },
    };
  },

  mounted() {
    this.getCouponUserListFn(this.paging);
  },
  methods: {
    // 重设函数
    resetFn() {
      this.initSelectValue = "";
      this.romdom = Math.random();
      this.options.value = "";
      this.paging.status = "";
    },
    // 当前页发生改变时候
    CurrentPageChangeFn(pageNUm) {
      this.paging.pageNum = pageNUm;
      this.getCouponUserListFn(this.paging);
    },
    // 页容量发生改变时候
    currentPageSizeChangeFn(pageSize) {
      this.paging.pageSize = pageSize;
      this.getCouponUserListFn(this.paging);
    },
    // 筛选数据
    queryFn(arr) {
      console.log(arr);
      arr.forEach((item) => {
        for (const key in item) {
          console.log(item[key], "fenshou");
          this.paging[key] = item[key];
        }
      });
      this.currentSelect = this.initSelectValue;
      console.log(this.paging, "查询");
      this.paging.pageNum = 1;
      this.getCouponUserListFn(this.paging);
    },
    // 获取列表数据
    async getCouponUserListFn() {
      this.loading = true;
      let { rows, code, total } = await getCouponUserListApi(this.paging);

      console.log(rows, "可用卡券的数据");
      if (code == 200) {
        this.tableList = rows;
        this.paging.total = total;
        // 把后端放回的字段变成下拉筛选字段

        this.loading = false;
      }
    },
    async ChangeFn(value) {
      (this.paging = {
        pageNum: 1,
        pageSize: 10,
        status: "",
        total: 10,
        orderNo: "",
        phonenumber: "",
        nickname: "",
      }),
        (this.paging.status = value);
      this.getCouponUserListFn();
    },

    // 查看
    async clickLook(row) {
      this.$router.push({
        path: "/systems/coupon/detailAvailable",
        query: { id: row.idStr },
      });
    },
  },
};
</script>

<style lang ="scss" scoped>
.comform {
  margin-top: 20px;
}
</style>